<template>
  <view class="login-container">
    <view class="header">
      <uni-text class="title">欢迎登录</uni-text>
      <uni-text class="subtitle">登录后体验更多精彩功能</uni-text>
    </view>
    <view class="form-container">
      <view class="input-group">
        <uni-icons class="input-icon" type="phone" size="20" color="#999"></uni-icons>
        <input class="input" type="number" v-model="form.phone" placeholder="请输入手机号" placeholder-class="placeholder" />
      </view>
      <view class="input-group">
        <uni-icons class="input-icon" type="locked" size="20" color="#999"></uni-icons>
        <input class="input" type="password" v-model="form.password" placeholder="请输入密码" placeholder-class="placeholder" />
      </view>
      <button class="login-btn" @click="handleLogin">登录</button>
      <view class="register-tip">
        <uni-text class="register-text">还没有账号？</uni-text>
        <uni-text class="register-link" @click="handleRegister">立即注册</uni-text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      form: {
        nickname: '',
        phone: '',
        password: ''
      }
    }
  },
  methods: {
    handleLogin() {
      if (!this.form.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
        uni.showToast({
          title: '请填写正确的手机号',
          icon: 'none'
        })
        return
      }
      if (!this.form.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
      }
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 10000
      })
      this.$api.login({
        phone: this.form.phone,
        password: this.form.password
      }).then(res => {
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        this.$store.commit('SET_USERINFO', res)
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        },1000)
      }).finally(() => {
        uni.hideLoading()
      })
    },
    handleRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    }
  }
}
</script>

<style>
page {
  height: 100%;
}
.login-container {
  height: 100%;
  padding: 0 60rpx;
  background: linear-gradient(180deg, #E4F6FF 0%, #F7F8FA 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.login-container::before {
  content: '';
  position: absolute;
  top: -200rpx;
  right: -200rpx;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(51,109,244,0.1), rgba(51,109,244,0.05));
  z-index: 1;
}
.login-container::after {
  content: '';
  position: absolute;
  bottom: -150rpx;
  left: -150rpx;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(51,109,244,0.08), rgba(51,109,244,0.03));
  z-index: 1;
}
.header {
  margin-top: 160rpx;
  margin-bottom: 100rpx;
  position: relative;
  z-index: 2;
}
.title {
  display: block;
  font-size: 48px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}
.subtitle {
  display: block;
  font-size: 14px;
  color: #999999;
}
.form-container {
  flex: 1;
  position: relative;
  z-index: 2;
}
.input-group {
  position: relative;
  margin-bottom: 40rpx;
}
.input-icon {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.input {
  width: 100%;
  height: 100rpx;
  background: #f8f8f8;
  border-radius: 50rpx;
  padding: 0 40rpx 0 80rpx;
  font-size: 14px;
  color: #333333;
}
.placeholder {
  color: #999999;
}
.login-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background: rgba(51,109,244,1);
  color: #ffffff;
  font-size: 16px;
  border-radius: 50rpx;
  margin-bottom: 40rpx;
}
.register-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80rpx;
}
.register-text {
  font-size: 14px;
  color: #999999;
}
.register-link {
  font-size: 14px;
  color: rgba(51,109,244,1);
  margin-left: 10rpx;
}
</style>
